<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
	<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NewsDetails</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link rel="stylesheet" type="text/css" href="css/css2.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/vue/vue.js"></script>
<style type="text/css">
#main {
	margin: 0 auto;
	width: 800px;
	height: auto;
	border: yellow none 2px;
	left: 650px;
}

#message {
	position: relative;
	left: 690px;
	top: 100px;
}

#context {
	width: 300px;
	height: 150px;
}

.t {
	position: relative;
	left: 490px;
}

.img {
	position: relative;
	left: 100px;
}

#comment {

	border: yellow none 2px;
	width: 800px;
	height: auto;
	position: relative;
	left: 650px;
}

#uname {
	width: 298px;
}

.modal-content {
	width: 300px;
	height: 150px;
}

.hh {
	position: relative;
	left: 85px;
	top: 50px;
}
#hf{
	position: relative;
	left: 30em;
	font-size:10px;
	width: 60px;
	height: 40px;
}

.xiajiantou{
	width:20px;
	height:20px;
	
}
.zk{
	position: relative;
	left: 11em;
	
}
/* #reply{
	position: relative;
	left: 80em;
	top:-15em;
} */

#butt{
	position: relative;
	left: 5em;
	background-color:green;
}
#butts{
	position: relative;
	left: 16.7em;
	top:0.15em;
}
.replyCom{
position: relative;
	left: 11em;
}
.name{
	color: #6495ED;
}
.breadcrumb{
 padding-bottom:3em;
	
}
.heads{
border: red solid 2px;
 border-radius:18px
}
</style>

<script type="text/javascript">




	$(function() {
		var news_Id = $("#news_Id").val();
		$.ajax({
			url : "queryComment",
			data : {
				news_Id : news_Id
			},
			type : "post",
			dataType : "json",
			success : function(result) {
				console.log("********************"+result);
				/* $.each(result, function(index, exem) {
					$("#comm").append("<dd>" + exem.commentTime + "</dd><br><dd>"
									+ exem.comContent + "    <button id='hf' onclick='reply()' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>回复</button>" + "</dd>")
				} )
				*/
				vue.result=result;
			}
		})

	});
	
	
	function reply(){
var comId=$("#commid").val();
var userId=$("#userId").val();
var repContent=$("#contents").val();
console.log(comId);
		$.ajax({
			
			url:"replyComment.do",
			data:{comId:comId,userId:userId,repContent:repContent},
			type:"post",
			dataType:"json",
			success:function(result){
				console.log(result);
			
			}
		})
		
	}
	
	

	
/*  var hideReply=function(){
	$("#reply").hide();
	$("#idshow").show();
	$("#idhide").hide();
} */	 
 function demo() {
	 
	 
		if($("#context").val()==""){
			alert("内容不可以为空！"); 
			return false;
		}else{
			var news_Id=$("#news_Id").val();
			 var user_Id=$("#user_Id").val();
			 var comContent=$("#context").val();
			 console.log("++++++++++"+comContent);
			$.ajax({
				
				url:"LeaveMessage.do",
				data:{news_Id:news_Id,user_Id:user_Id,comContent:comContent},
				type:"post",
				dataType:"json",
				success:function(result){
					console.log(result);
				
				}
			})
		    alert("评论成功！"); 
		    return;
		    location.replace();
		}
	}
 
 function showReply(obj){
	 var comId=$(obj).next().val();
	 console.log("...+++++"+comId);
	 $.ajax({
				url:"ShowReply",
				data:{comId:comId},
				type:"post",
				dataType:"json",
				success:function(result){
					console.log("..."+result);
					$.each(result, function(index, exem) {
						$(obj).parents(".zk").next().append("<ul><li>"+exem.repContent+"&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;   用户："+exem.user.uname +"</li></ul>")
						console.log("..++++++."+exem.user.uname+"内容："+exem.repContent);
					} )
					
				}
				})
				
 }
 function re(btnObj){
	 var comid= $(btnObj).next().val();
	 //alert(comid);
	 $("#commid").val(comid);
	 
 }
 
 

 
</script>


</head>
<body>
<div id="mymain">

	<div class="dark placeholder">
<div class="breadcrumb">
			<a href="index.jsp">游戏首页</a><a href="html/news.jsp">新闻资讯</a><a href="<%=basePath%>NewsDetails.jsp">新闻详情</a>
		</div>
		
		<p></p>
	</div>
	<div id="main">

		<h2 align="center">${news.title}</h2>
		${news.content} <img alt="" src="${news.photo}" class="img">
	</div>
	<h2 class="t">全部评论内容：</h2>
	<hr />
	<div id="comment">
		<ul>
			<li id="comm">
			
				<dl  v-for="re in result">
				
				<dd>
				<span><img alt=""style=width:35px;height:35px; :src="re.user.photo" class="heads"></span><span class="name">{{re.user.uname}}:</span>&nbsp;&nbsp;&nbsp;{{re.commentTime}}
				       
				</dd>
				
				
				<dd>
				{{re.comContent}}  
				<button id='hf'  class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal' onclick="re(this);">回复</button>
				<input type="hidden"  :value="re.comId" />
				<input type="hidden" id="userId" value="1" />
				</dd>
				
				
				<dd class="zk">
				<p ><!-- v-on:click="showReply($event,re.comId)"  onclick="showReply()"-->
				<button id="idshow" onclick="showReply(this)">
				展开剩余回复<img alt="下箭头" src="photo/下箭头(2).png" class="xiajiantou" >
				</button><input type="hidden"  :value="re.comId" />
				<!--  <button id="idhide" style="display: none" onclick="hideReply()">
				收起回复<img alt="上箭头" src="photo/上箭头.png" class="xiajiantou">
				</button>  -->
				
				</p>
				
				</dd>

				<dd class="replyCom">	
				</dd>
				</dl>
				
			</li>
		</ul>
	</div>

	<!--  -->
	<div id="message">
		<!--  LeaveMessage-->
		<form action="#" method="post" id="form1" >
			<table>
			<!-- session.setAttribute("uid",user2.getUid() );
		session.setAttribute("uname",user2.getUname() ); -->
			
				<tr>
					<td><input type="hidden" name="news_Id" id="news_Id" value="${news.newsId}" /></td>
					<td><input type="hidden" name="user_Id" id="user_Id" value="3" /></td>
				</tr>
				<tr>

					<td class="field"></td>
					<td><input class="text" type="text" name="Name" id="uname"
						disabled="disabled"
						value="              “${username}”                不打算说点啥吗？" /></td>
				</tr>

				<tr>
					<td class="field">留言内容：</td>
					<td><textarea name="comContent" id="context"></textarea><span></span></td>
				</tr>
				<tr>
					<td><button id="butt" onclick="demo()" type="reset" class="layui-btn layui-btn-primary">提交</button></td>
					<td><label class="ui-blue">
							<button type="reset" class="layui-btn layui-btn-primary" id="butts">重置</button>

					</label></td>

				</tr>
			</table>

		</form>
	</div>
	
	

	

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    
                    			
				        回复:<textarea  name="repContent" id="contents" style="max-width:270px;max-height:100px;min-width:270px;min-height:100px"></textarea>
					  
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="commid">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal"  onclick='reply()'>提交</button>
                </div>
            </div>
        </div>
       
</div> 
</div>

</body>
	<script type="text/javascript">
	var vue=new Vue({
		el:'#mymain',
		data:{
			result:'',
			/* Replyresult:'', */
		},
	 	 methods:{
		}
	}) 
	</script>
<!-- 	showReply:function(event,comId){
			 var el = event.currentTarget;
			 console.log("............................"+comId);
			 var comId=$("#comId").val(); 
			$.ajax({
				url:"ShowReply",
				data:{comId:comId},
				type:"post",
				dataType:"json",
				success:function(result){
					console.log("..."+result);
					vue.Replyresult=result;
					 $("#reply").show();
					$("#idshow").hide();
					$("#idhide").show();  
				}
			});
		}, -->
</html>